<template>
<el-scrollbar style="height:100%;">
  <div class="container p-40">
    <div>
      <p class="f-17 m-b-20">基本信息</p>
      <el-form v-loading="loading" style="margin-top: 20px" ref="basicForm" :rules="rules" :model="basicForm"
        label-width="1.4rem">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="户型名称" prop="houseTypeName">
              <el-input v-model="basicForm.houseTypeName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实用面积" prop="usableArea">
              <el-input type="number" v-model="basicForm.usableArea" placeholder="请输入">
                <template slot="suffix">㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建筑面积" prop="constructionArea">
              <el-input type="number" v-model="basicForm.constructionArea" placeholder="请输入">
                <template slot="suffix">㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房间朝向" prop="roomFacing">
              <el-select v-model="basicForm.roomFacing" placeholder="请选择">
                <el-option v-for="item in facing" :key="item.pkBasicdataId" :value="item.pkBasicdataId"
                  :label="item.itemName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房间户型" prop="fkRoomTypeId">
              <el-select v-model="basicForm.fkRoomTypeId" placeholder="请选择">
                <el-option v-for="item in roomType" :key="item.pkBasicdataId" :value="item.pkBasicdataId"
                  :label="item.itemName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="1"> &nbsp; </el-col>
            <el-col :span="8">
              <el-form-item label="房屋类型">
                <el-select v-model="basicForm.fkHouseTypeId" placeholder="请选择">
                  <el-option v-for="item in housingType" :key="item.pkBasicdataId" :value="item.pkBasicdataId"
                    :label="item.itemName"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          <el-col :span="8">
            <el-form-item label="所属楼宇" prop="fkBuildingId">
              <el-select v-model="basicForm.fkBuildingId" placeholder="请选择">
                <el-option v-for="item in building" :label="item.buildingName" :key="item.pkBuildingId"
                  :value="item.pkBuildingId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- prop="supportingFacilities" -->
            <el-form-item label="配套设施">
              <el-checkbox-group v-model="supportingFacilities">
                <el-checkbox-button v-for="(item,index) in supportingFacilitiesSelVal" :key="index" :label="item.pkBasicdataId">
                  {{item.itemName }}
                </el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" show-word-limit maxlength="200"
                v-model="basicForm.remarks">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="户型图">
              <up-img ref="upImg" v-model="basicForm.apartmentRenderings" imgWidth="150px" imgHeight="100px"
                :imgLength="7"></up-img>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row justify="center" style="margin-top: 1rem">
        <el-col :span="4" :offset="10">
          <el-button type="primary" @click="submitForm" :loading="hasSubmit">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</el-scrollbar>
</template>

<script>
  import {
    addHouseType,
    updateHouseType,
    getHouseTypeById,
  } from "@/api/house/type/type.js";
  // import elUpImage from '@/components/elUpImage'
  import upImg from '@/components/upImg'
  import { selectNameToId, getOneAll } from "@/api/common/common";
  import { getBuildingName } from "@/api/house/building/building.js";
  export default {
    data() {
      return {
        InitOldData: "",//初始数据 用于更改判断
        hasSubmit: false, //是否提交
        isUpdate: false, //是否修改
        loading: false, //加载状态
        building: [], //楼宇数据
        facing: [], //方位数据
        roomType: [], //户型数据
        supportingFacilities: [], //设施设备选中值
        supportingFacilitiesSelVal: [], // 设施设备数据
        basicForm: {
          apartmentRenderings: "", //户型图
          constructionArea: "", //建筑面积
          createdBy: 0,
          fkBuildingId: "",//楼宇外键
          fkRoomTypeId: "",//房间外键
          houseTypeName: "",//户型名称
          lastUpdatedBy: 0,
          usableArea: ""//实用面积
        },
        rules: {
          supportingFacilities: [
            {
              required: true,
              message: "请选择配套设施",
            },
          ],
          fkBuildingId: [
            {
              required: true,
              message: "请选择楼宇",
            },
          ],
          constructionArea: [
            {
              required: true,
              message: "请输入建筑面积",
            },
            {validator: this.$rules.PriceNumber}
          ],
          houseTypeName: [
            {
              required: true,
              message: "请输入户型名称",
            },
          ],
          usableArea: [
            {
              required: true,
              message: "请输入实用面积",
            },
            {validator: this.$rules.PriceNumber}
          ],
          roomFacing: [
            {
              required: true,
              message: "请选中房间朝向",
            },
          ],
          fkRoomTypeId: [
            {
              required: true,
              message: "请输入房间户型",
            },
          ],
        },
      };
    },
    components: {
      upImg
    },
    methods: {
      submitForm() {
        this.$refs["basicForm"].validate((valid) => {
          if (valid) {
            this.hasSubmit = true;
            this.$refs.upImg.submit().then(res => {
              this.basicForm.supportingFacilities = this.supportingFacilities.join(',');
              if (!this.isUpdate) {
                addHouseType(this.basicForm).then((result) => {
                  if (result.code === 10000) {
                    this.$message.success(result.msg);
                    this.close();
                  }
                }).finally(_ => {
                  this.hasSubmit = false;
                });
              } else {
                this.basicForm.oldFkBuildingId = this.InitOldData.fkBuildingId;
                updateHouseType(this.basicForm).then((result) => {
                  if (result.code === 10000) {
                    this.$message.success(result.msg);
                    this.close();
                  }
                }).finally(_ => {
                  this.hasSubmit = false;
                });
              }
            });
          }
        });
      },
      close() {
        // let p = new Promise((resolve, reject) => {
        //   if (JSON.stringify(this.basicForm) != this.InitOldData) {
        //     this.$confirm(`数据已被更改，是否保存 ?`, "提示", {
        //       confirmButtonText: "确定",
        //       cancelButtonText: "取消",
        //       type: "info",
        //     }).then(() => {
        //       this.submitForm();
        //     }).catch(() => {
        //       reject();
        //     });
        //   } else {
        //     reject();
        //   }
        // });
        // p.catch(() => {
        this.$router.push("/doorModel/list");

        //let rex = this.$route.matched[this.$route.matched.length - 1].regex;
        //this.$store.commit("delTabs", rex);
        // });
      },
    },
    mounted() {
      this.InitOldData = JSON.stringify(this.basicForm);
      getBuildingName().then((result) => {
        this.building = result.data;
      });
      getOneAll(selectNameToId('facing')).then(res => {
        this.facing = res.data;
      });
      getOneAll(selectNameToId('roomType')).then(res => {
        this.roomType = res.data;
      });
      getOneAll(selectNameToId('supportingFacilities')).then(res => {
        this.supportingFacilitiesSelVal = res.data;
      });
      // getOneAll(selectNameToId('housingType')).then(res => {
      //   this.housingType = res.data;
      // });
      if (this.$route.params.id) {
        this.loading = true;
        this.isUpdate = true;
        getHouseTypeById(this.$route.params.id).then((result) => {
          this.basicForm = result.data;
          this.InitOldData = JSON.stringify(this.basicForm);
          this.supportingFacilities = result.data.supportingFacilities && result.data.supportingFacilities.split(",");
          this.loading = false;
        });
      }
    },
  };
</script>
